<template>
  <div class="app-container EmployeeIndex">
    <div v-if="showList">
     <div class="select">
       <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="在职" name="holdPost">
          <div slot="label" class="tab-label-container">
            <div class="tab-label-title">在职</div>
            <div class="tab-label-num">{{holdPost}}</div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="离职" name="leave">
          <div slot="label" class="tab-label-container">
            <div class="tab-label-title">离职</div>
            <div class="tab-label-num">{{leave}}</div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待入职" name="retired">
          <div slot="label" class="tab-label-container">
            <div class="tab-label-title">退休</div>
            <div class="tab-label-num">{{retired}}</div>
          </div>
        </el-tab-pane>
      </el-tabs>
        <el-form :model="queryParams" ref="queryForm" :inline="true" class="query-form">
        <el-form-item >
          <el-input
            v-model="queryParams.employeeCode"
            placeholder="支持姓名、工号、手机号搜索"
            size="small"
            @keyup.enter.native="searchMethod"
          >
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-form-item>

        <el-form-item>
          <!-- <el-button type="primary" size="mini" @click="searchMethod">搜索</el-button> -->
          <el-button size="mini" @click="resetQuery">导出</el-button>
          <el-button type="primary" @click="add()" size="mini" v-hasPermi="['employee:employee:add']">添加人员</el-button>
        </el-form-item>
      </el-form>
     </div>
      <el-table ref="singleTable" :data="tableData" highlight-current-row style="width: 100%">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column v-for="(val,index) in bindTableColumns" :key="val.prop" :label="val.label" :prop="val.prop" :sortable="true" align="center">
          <template slot-scope="scope" >
            <el-button @click="viewDetail(scope.row)" v-hasPermi="['employee:employee:archives']" v-if="val.prop === 'employeeName'" type="text" >{{scope.row[val.prop]}}</el-button>
            <div v-else>{{scope.row[val.prop]}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" width="50">
          <template slot="header" slot-scope="scope">
            <el-popover
              placement="bottom-start"
              width="100"
              trigger="click"
            >
              <el-checkbox-group v-model="checkedTableColumns">
                <div style="display: flex;flex-direction: column;">
                  <el-checkbox v-for="(item,index) in tableCols" :key="item.prop" :label="item.prop" :disabled="item.disable">{{item.label}}</el-checkbox>
                </div>
              </el-checkbox-group>
              <i class="el-icon-s-tools" @click="clickReset" style="font-size: 25px;" slot="reference"></i>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      background=""
        @current-change="handleCurrentChange"
        :current-page="queryParams.current"
        :page-size="queryParams.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <edit v-if="editData.open" :prop="editData" @close="closeEdit"></edit>
    <detail v-if="detailData.open" :prop="detailData" @close="closeDetail"></detail>
  </div>
</template>

<script>
import {getPageList} from '@/api/employee/employee/employee.js';
import edit from './edit';
import detail from '@/views/employee/employee/detail.vue'
export default {
  name: "EmployeeIndex",
  dicts: [],
  components: {edit,detail},
  props: {},
  data() {
    return {
      showList:true,
      total:0,
      queryParams:{
        employeeCode:null,
        employeeName:null,
        employeeTel:null,
        employeeJoinStatus:null,
        employeeFormalStatus:null,
        employeeLeaveStatus:null,
        employeeRetiredStatus:null,
        current: 1,//当前页码
        size: 10, //每页显示数量
      },
      tableData: [],
      activeName: 'holdPost',
      holdPost:0,
      leave:0,
      retired:0,
      tableCols: [
        {prop: 'employeeName', label: '中文姓名',show:true,disable:false},
        {prop: 'employeeCode', label: '工号',show:true,disable:false},
        {prop: 'employeeStatus', label: '转正状态',show:true,disable:false},
        {prop: 'postName', label: '岗位名称',show:true,disable:false},
        {prop: 'postTypeName', label: '岗位类别',show:true,disable:false},
        {prop: 'gradeName', label: '岗位职级',show:true,disable:false},
        {prop: 'organizationName', label: '直属组织',show:true,disable:false},
        {prop: 'employeeEmployType', label: '雇佣性质',show:true,disable:false},
        {prop: 'employeeInHeadship', label: '编制类型',show:true,disable:false},
        {prop: 'employeeGender', label: '性别',show:true,disable:false},
        {prop: 'age', label: '年龄',show:true,disable:false},
        {prop: 'employeeTel', label: '手机号',show:true,disable:false},
      ],
      editData:{
        open:false,
        title:'新增人员'
      },
      detailOpen:false,
      detailData:{
        open:false,
        employeeId:null,
        employeeCode:null,
      }
    };
  },
  computed: {
     bindTableColumns() {
       return this.tableCols.filter((column) => column.show);
     },
     checkedTableColumns:{
       get(){
         return this.bindTableColumns.map(column=>column.prop)
       },
       set(checked){
         this.tableCols.forEach(col =>{
           if(checked.includes(col.prop)){
             col.show = true
           }else{
             col.show = false
           }
         })
       }
     }
  },
  methods: {
    handleClick(tab, event) {
      let name = tab.name
      switch (name){
        case 'holdPost':
          this.queryParams.employeeStatus = '2'
          this.tableCols=[
            {prop: 'employeeName', label: '中文姓名',show:true,disable:false},
            {prop: 'employeeCode', label: '工号',show:true,disable:false},
            {prop: 'employeeStatus', label: '转正状态',show:true,disable:false},
            {prop: 'postName', label: '岗位名称',show:true,disable:false},
            {prop: 'postTypeName', label: '岗位类别',show:true,disable:false},
            {prop: 'gradeName', label: '岗位职级',show:true,disable:false},
            {prop: 'organizationName', label: '直属组织',show:true,disable:false},
            {prop: 'employeeEmployType', label: '雇佣性质',show:true,disable:false},
            {prop: 'employeeInHeadship', label: '编制类型',show:true,disable:false},
            {prop: 'employeeGender', label: '性别',show:true,disable:false},
            {prop: 'age', label: '年龄',show:true,disable:false},
            {prop: 'employeeTel', label: '手机号',show:true,disable:false},
          ]
          break;
        case 'leave':
          this.queryParams.employeeStatus = '3'
          this.tableCols=[
            {prop: 'employeeName', label: '中文姓名',show:true,disable:false},
            {prop: 'employeeCode', label: '工号',show:true,disable:false},
            {prop: 'postName', label: '岗位名称',show:true,disable:false},
            {prop: 'postTypeName', label: '岗位类别',show:true,disable:false},
            {prop: 'gradeName', label: '岗位职级',show:true,disable:false},
            {prop: 'organizationName', label: '直属组织',show:true,disable:false},
            {prop: 'employeeEmployType', label: '雇佣性质',show:true,disable:false},
            {prop: 'employeeInHeadship', label: '编制类型',show:true,disable:false},
            {prop: 'employeeGender', label: '性别',show:true,disable:false},
            {prop: 'age', label: '年龄',show:true,disable:false},
            {prop: 'employeeJoinTime', label: '入职日期',show:true,disable:false},
            {prop: 'employeeLeaveTime', label: '离职日期',show:true,disable:false},
            {prop: 'employeeLeaveType', label: '离职类型',show:true,disable:false},
          ]
          break;
        case 'retired':
          this.queryParams.employeeStatus = '4'
          this.tableCols=[
            {prop: 'employeeName', label: '中文姓名',show:true,disable:false},
            {prop: 'employeeCode', label: '工号',show:true,disable:false},
            {prop: 'postName', label: '岗位名称',show:true,disable:false},
            {prop: 'postTypeName', label: '岗位类别',show:true,disable:false},
            {prop: 'gradeName', label: '岗位职级',show:true,disable:false},
            {prop: 'organizationName', label: '直属组织',show:true,disable:false},
            {prop: 'employeeEmployType', label: '雇佣性质',show:true,disable:false},
            {prop: 'employeeInHeadship', label: '编制类型',show:true,disable:false},
            {prop: 'employeeGender', label: '性别',show:true,disable:false},
            {prop: 'age', label: '年龄',show:true,disable:false},
            {prop: 'employeeJoinTime', label: '入职日期',show:true,disable:false},
            {prop: 'employeePlanLeaveTime', label: '计退休日期',show:true,disable:false},
            {prop: 'employeeRetiredTime', label: '办理日期',show:true,disable:false},
          ]
          break;
        default:
          this.queryParams.employeeStatus = '2'
          this.tableCols=[
            {prop: 'employeeName', label: '中文姓名',show:true,disable:false},
            {prop: 'employeeCode', label: '工号',show:true,disable:false},
            {prop: 'employeeStatus', label: '转正状态',show:true,disable:false},
            {prop: 'postName', label: '岗位名称',show:true,disable:false},
            {prop: 'postTypeName', label: '岗位类别',show:true,disable:false},
            {prop: 'gradeName', label: '岗位职级',show:true,disable:false},
            {prop: 'organizationName', label: '直属组织',show:true,disable:false},
            {prop: 'employeeEmployType', label: '雇佣性质',show:true,disable:false},
            {prop: 'employeeInHeadship', label: '编制类型',show:true,disable:false},
            {prop: 'employeeGender', label: '性别',show:true,disable:false},
            {prop: 'age', label: '年龄',show:true,disable:false},
            {prop: 'employeeTel', label: '手机号',show:true,disable:false},
          ]
          break;
      }
      this.getPageList()
    },
    clickReset(){
      this.reset = !this.reset
    },
    resetQuery(){
      this.queryParams = {
        employeeCode:null,
        employeeName:null,
        employeeTel:null,
        employeeStatus:'2',
        size:10,
        current:1,
      }
      this.getPageList()
    },
    // 查询员工列表
    getPageList() {
      getPageList(this.queryParams).then((res) => {
        if (res.code == 200) {
          let data = res.data
          this.tableData = data.page.records;
          this.tableData.forEach(u =>{
            //设置员工状态
            switch (u.employeeStatus){
              case '0':
                u.employeeStatus = '待入职'
                break;
              case '1':
                u.employeeStatus = '试用'
                break;
              case '2':
                u.employeeStatus = '正式'
                break;
              case '3':
                u.employeeStatus = '离职'
                break;
              case '4':
                u.employeeStatus = '退休'
                break;
              default:
                u.employeeStatus = '正式'
                break;
            }
            //设置雇佣性质
            switch (u.employeeEmployType){
              case '0':
                u.employeeEmployType = '内聘'
                break;
              case '1':
                u.employeeEmployType = '外聘'
                break;
              case '2':
                u.employeeEmployType = '返聘'
                break;
              default:
                u.employeeEmployType = '外聘'
                break;
            }
            //编制类型
            u.employeeInHeadship = u.employeeInHeadship === '0'?'非事业编制':'事业编制'//编制类型
            u.employeeGender = u.employeeGender === '0'?'男':'女'
          })
          this.total = data.page.total;
          this.holdPost = data.holdPost
          this.leave = data.leave
          this.retired = data.retired
        }
      })
    },
    // 翻页
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getPageList();
    },
    // 点击 搜索按钮
    searchMethod() {
      this.getPageList();
    },
    // 点击 添加员工按钮
    add() {
      this.showList = false
      this.editData = {open:true,title:'添加人员',employeeId:null,}
    },
    edit(){
      this.showList = false
    },
    closeEdit(){
      this.editData = {open:false,employeeId:null,employeeCode:null,title:'添加人员'}
      this.showList = true
      this.getPageList()
    },
    viewDetail(row){
      this.detailData = {open:true,employeeId:row.employeeId,employeeCode:row.employeeCode}
      this.showList = false
    },
    closeDetail(){
      this.showList = true
      this.detailData = {open:false,employeeId:null,employeeCode:null}
    }
  },
  mounted() {
    this.getPageList();
  },
  updated() {

  },

};
</script>
<style  scoped>

  >>>.tab-label-container{
    display: flex;
    flex-direction: column;
  }
  >>>.tab-label-title{
    text-align: center;
    line-height: 1;
    height: 18px;
  }
  >>>.tab-label-num{
    text-align: center;
    line-height: 1;
    height: 18px;
  }
  .select{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .el-pagination {
  margin-top: 20px;
  float: right;
}
</style>
